<template>
  <div class="layout-header">
    <div class="arrow-left-svg" @click="goBack">
      <SvgIcon
        svg-name="arrow-left"
        class-name="arrow-left-svg"
        :color="color"
      />
    </div>
    <div class="title" :style="{ color: color }">{{ props.title }}</div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
  title: String,
  color: {
    type: String,
    default: 'var(--title-color)'
  }
})

const goBack = () => {
  router.go(-1)
}
</script>

<style lang="less" scoped>
.layout-header {
  display: flex;
  align-items: center;
  height: 88px;
  line-height: 88px;
  padding: 0 32px;

  & > div {
    flex: 0 0 33.3%;
  }

  .arrow-left-svg {
    width: 17px;
    height: 35px;
    display: flex;
  }

  .title {
    font-size: 34px;
    // color: var(--title-color);
    text-align: center;
  }
}
</style>
